SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Model–view–viewmodel</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Model–view–viewmodel</span></span>

</h1>

</header>

</p>

<p><b>Model–view–viewmodel</b> (<b>MVVM</b>) is an <a href="Architectural_pattern" title="Architectural pattern">architectural pattern</a> in computer software that facilitates the <a href="Separation_of_concerns" title="Separation of concerns">separation</a> of the development of a <a href="Graphical_user_interface" title="Graphical user interface">graphical user interface</a> (GUI; the <i>view</i>)—be it via a <a href="Markup_language" title="Markup language">markup language</a> or GUI code—from the development of the <a href="Business_logic" title="Business logic">business logic</a> or <a href="Front_and_back_ends" class="mw-redirect" title="Front and back ends">back-end</a> logic (the <i>model</i>) such that the view is not dependent upon any specific model platform.

</p><p>The <i>viewmodel</i> of MVVM is a value converter,<sup id="cite_ref-MVVM-eliminates-valueconverters_1-0" class="reference"><a href="#cite_note-MVVM-eliminates-valueconverters-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> meaning it is responsible for exposing (converting) the <a href="Data_object" class="mw-redirect" title="Data object">data objects</a> from the model in such a way they can be easily managed and presented. In this respect, the viewmodel is more <i>model</i> than <i>view</i>, and handles most (if not all) of the view's display logic.<sup id="cite_ref-MVVM-eliminates-valueconverters_1-1" class="reference"><a href="#cite_note-MVVM-eliminates-valueconverters-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> The viewmodel may implement a <a href="Mediator_pattern" title="Mediator pattern">mediator pattern</a>, organizing access to the back-end logic around the set of <a href="Use_case" title="Use case">use cases</a> supported by the view.

</p><p>MVVM is a variation of <a href="Martin_Fowler_(software_engineer)" title="Martin Fowler (software engineer)">Martin Fowler</a>'s Presentation Model design pattern.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-JoshSmith_3-0" class="reference"><a href="#cite_note-JoshSmith-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> It was invented by <a href="Microsoft" title="Microsoft">Microsoft</a> architects Ken Cooper and Ted Peters specifically to simplify <a href="Event-driven_programming" title="Event-driven programming">event-driven programming</a> of user interfaces. The pattern was incorporated into the <a href="Windows_Presentation_Foundation" title="Windows Presentation Foundation">Windows Presentation Foundation (WPF)</a> (Microsoft's <a href=".NET_Framework" title=".NET Framework">.NET</a> graphics system) and <a href="Silverlight" class="mw-redirect" title="Silverlight">Silverlight</a>, WPF's Internet application derivative.<sup id="cite_ref-JoshSmith_3-1" class="reference"><a href="#cite_note-JoshSmith-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> John Gossman, a Microsoft WPF and Silverlight architect, announced MVVM on his blog in 2005.<sup id="cite_ref-JoshSmith_3-2" class="reference"><a href="#cite_note-JoshSmith-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-Gossman2005_4-0" class="reference"><a href="#cite_note-Gossman2005-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>

</p><p>Model–view–viewmodel is also referred to as <b>model–view–binder</b>, especially in implementations not involving the <a href=".NET" title=".NET">.NET</a> platform. <a href="ZK_(framework)" title="ZK (framework)">ZK</a>, a <a href="Web_application_framework" class="mw-redirect" title="Web application framework">web application framework</a> written in <a href="Java_(programming_language)" title="Java (programming language)">Java</a>, and the <a href="JavaScript" title="JavaScript">JavaScript</a> <a href="Library_(computing)" title="Library (computing)">library</a> <a href="KnockoutJS" class="mw-redirect" title="KnockoutJS">KnockoutJS</a> use model–view–binder.<sup id="cite_ref-JoshSmith_3-3" class="reference"><a href="#cite_note-JoshSmith-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-SMassey_5-0" class="reference"><a href="#cite_note-SMassey-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Components_of_MVVM_pattern">Components of MVVM pattern</h2></div>

<dl><dt>Model</dt>

<dd><i>Model</i> refers either to a <a href="Domain_model" title="Domain model">domain model</a>, which represents real state content (an object-oriented approach), or to the <a href="Data_access_layer" title="Data access layer">data access layer</a>, which represents content (a data-centric approach).</dd>

<dd>As in the <a href="Model%E2%80%93view%E2%80%93controller" title="Model–view–controller">model–view–controller</a> (MVC) and <a href="Model%E2%80%93view%E2%80%93presenter" title="Model–view–presenter">model–view–presenter</a> (MVP) patterns, the <i>view</i> is the structure, layout, and appearance of what a user sees on the screen.<sup id="cite_ref-MSDN_7-0" class="reference"><a href="#cite_note-MSDN-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> It displays a representation of the model and receives the user's interaction with the view (mouse clicks, keyboard input, screen tap gestures, etc.), and it forwards the handling of these to the view model via the <a href="Data_binding" title="Data binding">data binding</a> (properties, event callbacks, etc.) that is defined to link the view and view model.</dd>

<dt>View model</dt>

<dd>The <i>view model</i> is an abstraction of the view exposing public properties and commands. Instead of the controller of the MVC pattern, or the presenter of the MVP pattern, MVVM has a <i>binder</i>, which automates communication between the view and its bound properties in the view model. The view model has been described as a state of the data in the model.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup></dd>

<dd>The main difference between the view model and the Presenter in the MVP pattern is that the presenter has a reference to a view, whereas the view model does not. Instead, a view directly binds to properties on the view model to send and receive updates. To function efficiently, this requires a binding technology or generating <a href="Boilerplate_code" title="Boilerplate code">boilerplate code</a> to do the binding.<sup id="cite_ref-MSDN_7-1" class="reference"><a href="#cite_note-MSDN-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup></dd>

<dd>Under <a href="Object-oriented_programming" title="Object-oriented programming">object-oriented programming</a>, the view model can sometimes be referred to as a <a href="Data_transfer_object" title="Data transfer object">data transfer object</a>.<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup></dd></dl>

<dl><dt>Binder</dt>

<dd>Declarative data and command-binding are implicit in the MVVM pattern. In the Microsoft <a href="Solution_stack" title="Solution stack">solution stack</a>, the binder is a <a href="Markup_language" title="Markup language">markup language</a> called <a href="XAML" class="mw-redirect" title="XAML">XAML</a>.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> The binder frees the developer from being obliged to write boiler-plate logic to synchronize the view model and view. When implemented outside of the Microsoft stack, the presence of a declarative data binding technology is what makes this pattern possible,<sup id="cite_ref-SMassey_5-1" class="reference"><a href="#cite_note-SMassey-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> and without a binder, one would typically use MVP or MVC instead and have to write more boilerplate (or generate it with some other tool).</dd></dl>

<div class="mw-heading mw-heading2"><h2 id="Rationale">Rationale</h2></div>

<p>MVVM was designed to remove virtually all <a href="Graphical_user_interface" title="Graphical user interface">GUI</a> code ("<a href="Code-behind" class="mw-redirect" title="Code-behind">code-behind</a>") from the view layer, by using <a href="Data_binding" title="Data binding">data binding</a> functions in WPF (Windows Presentation Foundation) to better facilitate the separation of view layer development from the rest of the pattern.<sup id="cite_ref-JoshSmith_3-4" class="reference"><a href="#cite_note-JoshSmith-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> Instead of requiring <a href="User_experience_design" title="User experience design">user experience</a> (UX) developers to write GUI code, they can use the framework markup language (e.g. <a href="Extensible_Application_Markup_Language" title="Extensible Application Markup Language">XAML</a>) and create data bindings to the view model, which is written and maintained by application developers. The separation of roles allows interactive designers to focus on UX needs rather than programming of business logic. The layers of an application can thus be developed in multiple work streams for higher productivity. Even when a single developer works on the entire codebase, a proper separation of the view from the model is more productive, as the user interface typically changes frequently and late in the development cycle based on end-user feedback.

</p><p>The MVVM pattern attempts to gain both advantages of separation of functional development provided by MVC, while leveraging the advantages of <a href="Data_binding" title="Data binding">data bindings</a> and the framework by binding data as close to the pure application model as possible.<sup id="cite_ref-JoshSmith_3-5" class="reference"><a href="#cite_note-JoshSmith-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-Gossman2005_4-1" class="reference"><a href="#cite_note-Gossman2005-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> It uses the binder, view model, and any business layers' data-checking features to validate incoming data. The result is that the model and framework drive as much of the operations as possible, eliminating or minimizing application logic which directly manipulates the view (e.g., code-behind).

</p>

<div class="mw-heading mw-heading2"><h2 id="Criticism">Criticism</h2></div>

<p>John Gossman has criticized the MVVM pattern and its application in specific uses, stating that MVVM can be "overkill" when creating simple user interfaces. For larger applications, he believes that generalizing the viewmodel upfront can be difficult, and that large-scale data binding can lead to lower performance.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Implementations">Implementations</h2></div>

<div class="mw-heading mw-heading3"><h3 id=".NET_frameworks">.NET frameworks</h3></div>

<ul><li>.NET Community Toolkit</li>

<li><a href="Avalonia_(software_framework)" title="Avalonia (software framework)">Avalonia</a></li>

<li>Caliburn, Caliburn.Micro</li>

<li>Chinook.DynamicMvvm Open source</li>

<li>DevExpress MVVM</li>

<li>DotVVM open source project</li>

<li>FreshMvvm</li>

<li>Jellyfish</li>

<li>Mugen MVVM Toolkit</li>

<li>MVVMLight Toolkit</li>

<li>MvvmCross</li>

<li>MvvmZero</li>

<li>Prism Library</li>

<li>Rascl</li>

<li>ReactiveUI</li>

<li><a href="Uno_Platform" title="Uno Platform">Uno Platform</a> - Open source</li></ul>

<div class="mw-heading mw-heading4"><h4 id="Web_Component_libraries">Web Component libraries</h4></div>

<ul><li>Microsoft FAST</li>

<div class="mw-heading mw-heading3"><h3 id="Java_frameworks">Java frameworks</h3></div>

<ul><li><a href="ZK_(framework)" title="ZK (framework)">ZK Studio</a></li></ul>

<div class="mw-heading mw-heading3"><h3 id="JavaScript_frameworks">JavaScript frameworks</h3></div>

<ul><li><a href="Angular_(application_platform)" class="mw-redirect" title="Angular (application platform)">Angular</a></li>

<li>Aurelia</li>

<li>Durandal</li>

<li><a href="Ember.js" title="Ember.js">Ember.js</a></li>

<li><a href="Knockout_(web_framework)" title="Knockout (web framework)">Knockout.js</a></li>

<li>Oracle JET</li>

<li><a href="React_(software)" title="React (software)">React</a></li>

<li><a href="Svelte" title="Svelte">Svelte</a></li>

<div class="mw-heading mw-heading3"><h3 id="Frameworks_for_C++_and_XAML_(Windows)">Frameworks for C++ and XAML (Windows)</h3></div>

<ul><li>Xamlcc</li></ul>

<ul><li><a href="Multitier_architecture" title="Multitier architecture">Multitier architecture</a></li>

<li><a href="Model%E2%80%93view%E2%80%93controller" title="Model–view–controller">Model–view–controller</a></li>

<li><a href="Model%E2%80%93view%E2%80%93presenter" title="Model–view–presenter">Model–view–presenter</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite id="CITEREFSmith" class="citation web cs1">Smith, Josh; et al. <a rel="nofollow" class="external text" href="https://groups.google.com/forum/#!topic/wpf-disciples/P-JwzRB_GE8">"Thought: MVVM eliminates 99% of the need for ValueConverters"</a>. <i>Google Groups</i>.</cite></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite id="CITEREFMartin_Fowler2004" class="citation web cs1">Martin Fowler (19 July 2004). <a rel="nofollow" class="external text" href="http://martinfowler.com/eaaDev/PresentationModel.html">"The Presentation Model Design Pattern"</a>. Martin Fowler.com.</cite></span>

</li>

<li id="cite_note-JoshSmith-3"><span class="mw-cite-backlink">^ <a href="#cite_ref-JoshSmith_3-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-JoshSmith_3-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-JoshSmith_3-2"><sup><i><b>c</b></i></sup></a> <a href="#cite_ref-JoshSmith_3-3"><sup><i><b>d</b></i></sup></a> <a href="#cite_ref-JoshSmith_3-4"><sup><i><b>e</b></i></sup></a> <a href="#cite_ref-JoshSmith_3-5"><sup><i><b>f</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFSmith2009" class="citation journal cs1">Smith, Josh (February 2009). <a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx">"WPF Apps with the Model–View–ViewModel Design Pattern"</a>. <i>MSDN Magazine</i>.</cite></span>

</li>

<li id="cite_note-Gossman2005-4"><span class="mw-cite-backlink">^ <a href="#cite_ref-Gossman2005_4-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Gossman2005_4-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFGossman2005" class="citation web cs1">Gossman, John (8 October 2005). <a rel="nofollow" class="external text" href="https://docs.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps">"Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps"</a>.</cite></span>

</li>

<li id="cite_note-SMassey-5"><span class="mw-cite-backlink">^ <a href="#cite_ref-SMassey_5-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-SMassey_5-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFMassey2011" class="citation web cs1">Massey, Simon (9 April 2011). <a rel="nofollow" class="external text" href="https://www.slideshare.net/simbo1905/design-patterns-in-zk-java-mvvm-as-modelviewbinder">"Presentation Patterns in ZK"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">24 March</span> 2012</span>.</cite></span>

</li>

<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><cite id="CITEREFSteve_Sanderson" class="citation web cs1">Steve Sanderson. <a rel="nofollow" class="external text" href="http://knockoutjs.com/documentation/observables.html">"KnockoutJS"</a>.</cite></span>

</li>

<li id="cite_note-MSDN-7"><span class="mw-cite-backlink">^ <a href="#cite_ref-MSDN_7-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-MSDN_7-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://msdn.microsoft.com/en-us/library/hh848246.aspx">"The MVVM Pattern"</a>. <i>msdn.microsoft.com</i>. 4 October 2012<span class="reference-accessdate">. Retrieved <span class="nowrap">29 August</span> 2016</span>.</cite></span>

</li>

<li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><cite id="CITEREFPete_Weissbrod" class="citation web cs1">Pete Weissbrod. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20080201101909/http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html">"Model–View–ViewModel Pattern for WPF: Yet another approach"</a>. Archived from <a rel="nofollow" class="external text" href="http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html">the original</a> on 1 February 2008.</cite></span>

</li>

<li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><cite id="CITEREFMicrosoft2024" class="citation web cs1">Microsoft (3 April 2024). <a rel="nofollow" class="external text" href="https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api">"Tutorial: Create a web API with ASP.NET Core"</a>.</cite></span>

</li>

<li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><cite id="CITEREFWildermuth2010" class="citation web cs1">Wildermuth, Shawn (11 May 2010). <a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/library/aa480224.aspx">"Windows Presentation Foundation Data Binding: Part 1"</a>. Microsoft<span class="reference-accessdate">. Retrieved <span class="nowrap">24 March</span> 2012</span>.</cite></span>

</li>

<li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://books.zkoss.org/wiki/Small_Talks/2012/February/New_Features_of_ZK_6#ZK_MVVM">"ZK MVVM"</a>. Potix<span class="reference-accessdate">. Retrieved <span class="nowrap">24 March</span> 2012</span>.</cite></span>

</li>

<li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><cite id="CITEREFKarl_Shifflett" class="citation web cs1">Karl Shifflett. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20090413205731/http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/">"Learning WPF M-V-VM"</a>. Archived from <a rel="nofollow" class="external text" href="http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/">the original</a> on 13 April 2009<span class="reference-accessdate">. Retrieved <span class="nowrap">5 June</span> 2009</span>.</cite></span>

</li>

<li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><cite id="CITEREFGossman2006" class="citation journal cs1">Gossman, John (4 March 2006). <a rel="nofollow" class="external text" href="https://docs.microsoft.com/en-gb/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm">"Tales from the Smart Client: Advantages and disadvantages of M-V-VM"</a>. <i>AI Skills Challenge</i>.</cite></span>

</li>

</ol></div></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1236075235">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></div><div role="navigation" class="navbox" aria-labelledby="Software_design_patterns225" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r1239400231">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div id="Software_design_patterns225" style="font-size:114%;margin:0 4em"><a href="Software_design_pattern" title="Software design pattern">Software design patterns</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Design_Patterns" title="Design Patterns">Gang of Four<br>patterns</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Creational_pattern" title="Creational pattern">Creational</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Abstract_factory_pattern" title="Abstract factory pattern">Abstract factory</a></li>

<li><a href="Builder_pattern" title="Builder pattern">Builder</a></li>

<li><a href="Factory_method_pattern" title="Factory method pattern">Factory method</a></li>

<li><a href="Prototype_pattern" title="Prototype pattern">Prototype</a></li>

<li><a href="Singleton_pattern" title="Singleton pattern">Singleton</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Structural_pattern" title="Structural pattern">Structural</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Adapter_pattern" title="Adapter pattern">Adapter</a></li>

<li><a href="Bridge_pattern" title="Bridge pattern">Bridge</a></li>

<li><a href="Composite_pattern" title="Composite pattern">Composite</a></li>

<li><a href="Decorator_pattern" title="Decorator pattern">Decorator</a></li>

<li><a href="Facade_pattern" title="Facade pattern">Facade</a></li>

<li><a href="Flyweight_pattern" title="Flyweight pattern">Flyweight</a></li>

<li><a href="Proxy_pattern" title="Proxy pattern">Proxy</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Behavioral_pattern" title="Behavioral pattern">Behavioral</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Chain-of-responsibility_pattern" title="Chain-of-responsibility pattern">Chain of responsibility</a></li>

<li><a href="Command_pattern" title="Command pattern">Command</a></li>

<li><a href="Interpreter_pattern" title="Interpreter pattern">Interpreter</a></li>

<li><a href="Iterator_pattern" title="Iterator pattern">Iterator</a></li>

<li><a href="Mediator_pattern" title="Mediator pattern">Mediator</a></li>

<li><a href="Memento_pattern" title="Memento pattern">Memento</a></li>

<li><a href="Observer_pattern" title="Observer pattern">Observer</a></li>

<li><a href="State_pattern" title="State pattern">State</a></li>

<li><a href="Strategy_pattern" title="Strategy pattern">Strategy</a></li>

<li><a href="Template_method_pattern" title="Template method pattern">Template method</a></li>

<li><a href="Visitor_pattern" title="Visitor pattern">Visitor</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Concurrency_pattern" title="Concurrency pattern">Concurrency<br>patterns</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Active_object" title="Active object">Active object</a></li>

<li><a href="Balking_pattern" title="Balking pattern">Balking</a></li>

<li><a href="Binding_properties_pattern" title="Binding properties pattern">Binding properties</a></li>

<li><a href="Double-checked_locking" title="Double-checked locking">Double-checked locking</a></li>

<li><a href="Asynchronous_method_invocation" title="Asynchronous method invocation">Event-based asynchronous</a></li>

<li><a href="Guarded_suspension" title="Guarded suspension">Guarded suspension</a></li>

<li><a href="Monitor_(synchronization)" title="Monitor (synchronization)">Monitor</a></li>

<li><a href="Proactor_pattern" title="Proactor pattern">Proactor</a></li>

<li><a href="Reactor_pattern" title="Reactor pattern">Reactor</a></li>

<li><a href="Readers%E2%80%93writer_lock" title="Readers–writer lock">Read–write lock</a></li>

<li><a href="Scheduler_pattern" class="mw-redirect" title="Scheduler pattern">Scheduler</a></li>

<li><a href="Scheduled-task_pattern" title="Scheduled-task pattern">Scheduled-task pattern</a></li>

<li><a href="Semaphore_(programming)" title="Semaphore (programming)">Semaphore</a></li>

<li><a href="Thread_pool" title="Thread pool">Thread pool</a></li>

<li><a href="Thread-local_storage" title="Thread-local storage">Thread-local storage</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Architectural_pattern" title="Architectural pattern">Architectural<br>patterns</a></th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Front_controller" title="Front controller">Front controller</a></li>

<li><a href="Interceptor_pattern" title="Interceptor pattern">Interceptor</a></li>

</ul></li>

<li><a href="Specification_pattern" title="Specification pattern">Specification</a></li>

<li><a href="Publish%E2%80%93subscribe_pattern" title="Publish–subscribe pattern">Publish–subscribe</a></li>

<li><a href="Naked_objects" title="Naked objects">Naked objects</a></li>

<li><a href="Service_locator_pattern" title="Service locator pattern">Service locator</a></li>

<li><a href="Active_record_pattern" title="Active record pattern">Active record</a></li>

<li><a href="Identity_map_pattern" title="Identity map pattern">Identity map</a></li>

<li><a href="Data_access_object" title="Data access object">Data access object</a></li>

<li><a href="Data_transfer_object" title="Data transfer object">Data transfer object</a></li>

<li><a href="Inversion_of_control" title="Inversion of control">Inversion of control</a></li>

<li><a href="JSP_model_2_architecture" title="JSP model 2 architecture">Model 2</a></li>

<li><a href="Broker_pattern" title="Broker pattern">Broker</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other<br>patterns</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Blackboard_design_pattern" class="mw-redirect" title="Blackboard design pattern">Blackboard</a></li>

<li><a href="Business_delegate_pattern" title="Business delegate pattern">Business delegate</a></li>

<li><a href="Composite_entity_pattern" title="Composite entity pattern">Composite entity</a></li>

<li><a href="Dependency_injection" title="Dependency injection">Dependency injection</a></li>

<li><a href="Guard_(computer_science)" title="Guard (computer science)">Guard clause</a></li>

<li><a href="Intercepting_filter_pattern" title="Intercepting filter pattern">Intercepting filter</a></li>

<li><a href="Lazy_loading" title="Lazy loading">Lazy loading</a></li>

<li><a href="Mock_object" title="Mock object">Mock object</a></li>

<li><a href="Null_object_pattern" title="Null object pattern">Null object</a></li>

<li><a href="Object_pool_pattern" title="Object pool pattern">Object pool</a></li>

<li><a href="Servant_(design_pattern)" title="Servant (design pattern)">Servant</a></li>

<li><a href="Type_Tunnel_pattern" class="mw-redirect" title="Type Tunnel pattern">Type tunnel</a></li>

<li><a href="Method_chaining" title="Method chaining">Method chaining</a></li>

<li><a href="Delegation_pattern" title="Delegation pattern">Delegation</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Books</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><i><a href="Design_Patterns" title="Design Patterns">Design Patterns</a></i></li>

<li><i><a href="Enterprise_Integration_Patterns" title="Enterprise Integration Patterns">Enterprise Integration Patterns</a></i></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">People</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Christopher_Alexander" title="Christopher Alexander">Christopher Alexander</a></li>

<li><a href="Erich_Gamma" title="Erich Gamma">Erich Gamma</a></li>

<li><a href="Ralph_Johnson_(computer_scientist)" title="Ralph Johnson (computer scientist)">Ralph Johnson</a></li>

<li><a href="John_Vlissides" title="John Vlissides">John Vlissides</a></li>

<li><a href="Grady_Booch" title="Grady Booch">Grady Booch</a></li>

<li><a href="Ward_Cunningham" title="Ward Cunningham">Ward Cunningham</a></li>

<li><a href="Martin_Fowler_(software_engineer)" title="Martin Fowler (software engineer)">Martin Fowler</a></li>

<li><a href="Robert_C._Martin" title="Robert C. Martin">Robert Martin</a></li>

<li><a href="Jim_Coplien" title="Jim Coplien">Jim Coplien</a></li>

<li><a href="Douglas_C._Schmidt" title="Douglas C. Schmidt">Douglas Schmidt</a></li>

<li><a href="Linda_Rising" title="Linda Rising">Linda Rising</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Communities</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="The_Hillside_Group" title="The Hillside Group">The Hillside Group</a></li>

<li><a href="Portland_Pattern_Repository" title="Portland Pattern Repository">Portland Pattern Repository</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">See also</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Anti-pattern" title="Anti-pattern">Anti-pattern</a></li>

<li><a href="Architectural_pattern" title="Architectural pattern">Architectural pattern</a></li></ul>

</div></td></tr></tbody></table></div></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-07-27" href="https://en.wikipedia.org/wiki/?title=Model%E2%80%93view%E2%80%93viewmodel&oldid=1302855599">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>